<template>
<div>
  <head title="Earned reward"></head>
  <div class="pageList">
    <text class="totoalmoney">AU$ {{rewardTotal}}</text>
    <text class="totalTix">Total rewards earned</text>
    <div class="topNav">
      <text class="navtit navTxt">Records</text>
    </div>
    <div class="boxSiz">
      <list class="contentBox" @loadmore="onloadmore" loadmoreoffset="200">
        <cell>
          <div class="contentItem" v-for="(item,index) in list" :key="index">
            <div class="navItemn">
              <text class="defat titles">{{item.mobile}} Placed an order</text>
              <text class="defat">{{item.create_time|formatDateTime}}</text>
            </div>
            <text class="textItem">AU$ {{item.reward}}</text>
          </div>
        </cell>
      </list>
    </div>
  </div>
</div>
</template>

<script>
import { get_reward_list } from "../../mixin/ajax";
import asCore from "../../mixin/core";
export default {
  data() {
    return {
      userId: "",
      page: 1,
      list: [],
      rewardTotal: "0.00",
      hasMore: true
    };
  },
  created() {
    var pref = weex.requireModule("storage");
    pref.getItem("rewardTotal", event => {
      if (event.result == "success") {
        this.rewardTotal = event.data;
      }
    });
    asCore.getBsessionid(userId => {
      this.userId = userId;
      this.getPageData();
    });
  },
  methods: {
     onloadmore(){
       if(this.hasMore){
         this.page++;
         this.getPageData;
       }
     },
    getPageData() {
      get_reward_list(
        { users_id: this.userId, page: this.page },
        (res, flag) => {
          if (flag && res.code == 200) {
            this.setList(res.data);
          }
        }
      );
    },
   
    setList(res) {
      if (this.page > 1) {
        this.list = this.list.concat(res.list);
      } else {
        this.list = res.list;
      }
      if (res.total > this.list.length || res.total === 0) {
        this.hasMore = false;
      }
    }
  }
};
</script>

<style>
.pageList {
  flex: 1;
  background-color: rgba(254, 227, 197, 1);
}
.topNav {
  width: 686px;
  margin-left: 32px;

  padding-left: 10px;
  flex-direction: row;
  margin-top: 60px;
}
.contentItem {
  flex-direction: row;
  padding: 20px;
  align-items: center;
}
.totoalmoney {
  font-size: 60px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 84px;
  text-align: center;
  margin-top: 80px;
  width: 750px;
}
.totalTix {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 42px;
  text-align: center;
  margin-top: 20px;
  width: 750px;
}
.navtit {
  width: 270px;
}
.navTxt {
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 22px;
}
.navItemn {
  flex: 1;
}
.boxSiz {
  flex: 1;
  padding: 10px 32px 20px;
}
.contentBox {
  flex: 1;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
}
.defat {
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 30px;
  margin-top: 6px;
}
.titles {
  font-size: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 37px;
}
.boxtit {
  text-align: left;
  width: 270px;
  padding-left: 32px;
}
.textItem {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 42px;
}
</style>